<template>
	<view style="margin: 40rpx 40rpx;">
		<text class="tetx">新的手机号码</text>
		<view class="number">
			<view><text>+86</text></view>
			<input type="number" placeholder="请输入您要修改的手机号" v-model="phone.phone"  />
		</view>
		<text class="text">验证码</text>
		<view class="number" style="border: 1px solid rgb(242, 247, 251); display: flex; justify-content: space-between;">
			<input type="number" placeholder="请输入验证码"  style="border: none;" />
			<text>获取验证码</text>
		</view>
		<button class="button" @click="revisephone ">确认</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';

import { revisePasswordApi } from '../../../api/teamDoctor';
import { useUserStore } from '../../../store/user';
	//修改的手机号
const phone =ref({
	phone:""
})	
	//状态机
	const popupRef = ref(null)
	const open = () => {popupRef.value?.open()}
	const userStore = useUserStore()
	//修改手机号
	function revisephone (){
		revisePasswordApi({
			_id:userStore.userInfo._id,
			phone:phone.value.phone
		}).then(res=>{
			if(res.code == 200){
				uni.showToast({
				  title: '修改成功',
				  icon: 'success',
				  duration: 2000
				});
				uni.navigateBack(-1)
				userStore.getUserInfo()
			}
		})
	}
	
	
	

</script>

<style scoped lang="scss">
	.number{
		display: flex;
		width: 670rpx;
		height: 88rpx;
		border: 1px solid rgb(242, 247, 251);
		border-radius: 10rpx;
		background-color: rgb(242, 247, 251);
		margin: auto;
		margin: 50rpx 0;
		line-height: 88rpx;
		view{
			height: 100%;
			font-size: 28rpx;
			color: #999;
			padding: 0 10rpx;
			text{
				height: 40rpx;
				padding-right: 10rpx;
				border-right: 1px solid #999;
			}
		}
		input{
			height: 100%;
			line-height: 88rpx;
		}
	}      
	 .tetx{
		 margin: 20rpx 0;
		 font-size: 28rpx;
		 color:rgb(51, 51, 51) ;
	 }
	 .button{
		margin: auto;
		margin-top: 40rpx;
		width: 670rpx;
		height: 88rpx;
		background-color: rgb(24, 119, 242);
		border-radius: 20rpx;
		color: #fff;
	 }
</style>
